<template>
  <div class="common-layout">
    <el-backtop :right="50" :bottom="100" />
    <el-container>
      <el-header>
        <el-affix :offset="0">
          <Menu @userPage="getUserPage"></Menu>
        </el-affix>
      </el-header>
      <el-main style="overflow-y: hidden;">
        <template v-if="isDetail">
          <UserLogo v-if="isUserPage.value" class="logo-layout"></UserLogo>
          <Logo v-else class="logo-layout"></Logo>
          <UserNavigation v-if="isUserPage.value" class="navigation-layout"></UserNavigation>
          <!-- v-if展示用户账号设置导航 -->
          <Navigation v-else class="navigation-layout"></Navigation>
        </template>
        <RouterView class="content"></RouterView>
      </el-main>
      <el-footer v-if="showFooter" class="footer-layout">
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Menu from '@/components/page-layout/Menu.vue';
import Footer from '@/components/page-layout/Footer.vue';
import Logo from '@/components/page-layout/Logo.vue';
import Navigation from '@/components/page-layout/Navigation.vue';
import UserNavigation from '@/components/page-layout/UserNavigation.vue';
import { ref, reactive, watch, onMounted, computed } from 'vue'
import router from '@/router';
import UserLogo from '@/components/page-layout/UserLogo.vue';

const showFooter = ref(true)
let isUserPage = reactive({
  value: false
})
const isDetail = ref(true)

onMounted(() => {
  if (router.currentRoute.value.path === '/discovery') {
    showFooter.value = false
  }
  if (router.currentRoute.value.matched[1].path === '/user') {
    isUserPage.value = true
  } else {
    isUserPage.value = false
  }
  if (router.currentRoute.value.matched[1].path === '/detail/:id') {
    isDetail.value = false
    showFooter.value = false
  } else {
    isDetail.value = true
  }
})

watch(router.currentRoute, () => {
  if (router.currentRoute.value.path === '/discovery') {
    showFooter.value = false
  } else {
    showFooter.value = true
  }
  if (router.currentRoute.value.matched[1].path === '/user') {
    isUserPage.value = true
  } else {
    isUserPage.value = false
  }
  if (router.currentRoute.value.matched[1].path === '/detail/:id') {
    isDetail.value = false
    showFooter.value = false
  } else {
    isDetail.value = true
  }
})

const getUserPage = (val: any) => {
  isUserPage.value = val
}



</script>

<style lang="scss" scoped>
.logo-layout {
  // background-color: aliceblue;
  background-color: #fff;
  margin: 5px 0 0 0;
}

.navigation-layout {
  // background-color: #f1f1f1;
  background-color: #fafafa;
  margin: 0 0 15px 0;
  border-top: 1px solid #fff;
}

.el-header {
  --el-header-padding: 0px;
}

.common-layout {
  min-width: 1280px;
  background-color: #f1f1f1;
}

.footer-layout {
  padding: 0 20px;
  height: 190px;
}
</style>